<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>


    body{
        background-color: #f5f5f5;
    }
    #app {
        width: 480px;
        height: 80px;
        margin: 200px auto;
    }
    .input-num {
        margin-top:20px;
        height: 100%;
        display: flex;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 4px 4px 4px #adadad;
        border: 1px solid #c7c7c7;
        background-color: #c7c7c7;
    }
    .input-num button {
        width: 150px;
        height: 100%;
        font-size: 40px;
        color: #ad2a27;
        cursor: pointer;
        border: none;
        outline: none;
        background-color:rgba(0, 0, 0, 0);
    }
    .input-num span {
        height: 100%;
        font-size: 40px;
        flex: 1;
        text-align: center;
        line-height: 80px;
        font-family:auto;
        background-color: white;
    }
    img{
        float: right;
        margin-top: 50px;
    }

</style>
</head>
<body>
<div id="app" class="input-num">
<button @click="add">+</button>
<span>{{ sz }}</span>
<button @click="azz">-</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            sz:1
        },
        methods:{
            add:function () {
                if (this.sz===10){
                    alert('多了了')
                }else {
                    this.sz+=1
                }

            },
            azz:function () {
                if (this.sz===0){
                    alert("少了")
                }else {
                    this.sz-=1
                }

            }

        }

    })



</script>
</body>
</html>